{% load staticfiles %}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="{% static 'rbac/plugins/bootstrap/css/bootstrap.css' %}"/>
    <style>
        .login {
            width: 400px;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #f0f0f0;
            padding: 10px 30px 50px 30px;
            -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
        }

        .password {
            width: 400px;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #f0f0f0;
            padding: 10px 30px 50px 30px;
            -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
        }

        .register {
            width: 400px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #f0f0f0;
            padding: 10px 30px 50px 30px;
            -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
            box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
        }

        .alert {
            padding: 6px;
            margin-bottom: 0;
        }

    </style>
</head>
<body>
<div class="login">
    <div style="font-size: 25px; font-weight: bold;text-align: center;">
        教务系统登陆
    </div>
    <form id="fm" method="POST">
        {% csrf_token %}
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="password">验证码</label>

            <div class="row">
                <div class="col-xs-7">
                    <input type="text" class="form-control" name="check_code" id="check_code" placeholder="请输入验证码">
                </div>
                <div class="col-xs-5">
                    <img id="check_code_img" src="/rbac/check_code/">
                </div>
            </div>

        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="1" name="rmb"> 一个月内自动登陆
            </label>

            <div class="right">
                <a href="#">忘记密码？</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <a id="submit" class="btn btn-primary">登 陆</a>
            </div>
            <div class="col-xs-9" style="padding-left: 0;">
                <div class="alert alert-danger hide">
                    <span style="padding: 0 5px 0 5px;display: inline-block;font-size: 14px">
                        <i class="fa fa-minus-circle" aria-hidden="true"></i>
                    </span>
                    <span id="error_msg" style="font-size: 12px;"></span>
                </div>
            </div>
        </div>

    </form>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'rbac/js/jquery-1.12.4.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            bindLogin();
        });

        function bindLogin() {
            $('#submit').click(function () {
                var $msg = $('#error_msg');
                $msg.parent().addClass('hide');
                $.ajax({
                    url: '/rbac/login/',
                    type: 'POST',
                    data: $('#fm').serialize(),
                    dataType: 'JSON',
                    success: function (arg) {
                        if (arg.status) {
                            location.href = arg.data;
                        } else {
                            $msg.parent().removeClass('hide');
                            $msg.text(arg.message);
                            var img = $('#check_code_img')[0];
                            img.src = img.src + '?';
                            $('#password,#check_code').val('');
                        }

                    }
                })

            })
        }

        $("#check_code_img").click(function () {
            console.log("111");
            $(this)[0].src += "?"
        });
    </script>
</div>
</body>
</html>